<template>
  <!--我的积分-->
  <div class="myjifen">
    <div class="header">
      <router-link to="/jifenmingxi" tag="div">
        <ul>
          <li>积分</li>
          <li>{{balance.integral}}</li>
        </ul>
      </router-link>
      <router-link to="/jifencode" tag="p"><img src="../../../assets/wenhao.png" alt="" width="15"> 积分规则</router-link>
    </div>
    <wv-group>
      <wv-cell title="积分兑换" is-link to="/integralgoods" class="duihuan"></wv-cell>
      <wv-cell title="兑换记录" is-link to="/jifenjilu"></wv-cell>
    </wv-group>
  </div>
</template>

<script type="text/ecmascript-6">
  import {userIntegral} from '../../../../test/unit/http'
  import {Toast} from 'we-vue'
  export default {
    name: '',
    props: {},
    data() {
      return {
        balance: {}
      };
    },
    methods: {},
    created() {
      userIntegral().then(res => {
        console.log(res);
        if (res.code == 100) {
          this.balance = res.object;
        }
      })
    },
    components: {}
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  .header {
    background: url("../../../assets/jifenbanner.png") no-repeat;
    background-size: 100% 100%;
    height: 180px;
    padding-top: 30px;
    position: relative;
    color: #fff;
    div {
      background-image: linear-gradient(to right, rgba(38, 115, 208, 0.3), #b6ddf8);
      box-shadow: 0 7px 20px rgba(38, 115, 208, 0.8);
      border-radius: 50%;
      width: 128px;
      height: 108px;
      margin: 10px auto 10px;
      padding-top: 20px;
      li:first-child {
        font-size: 15px;
      }
      li:last-child {
        font-size: 46px;
      }
    }
    p {
      font-size: 13px;
      position: absolute;
      top: 10px;
      right: 15px;
      img {
        vertical-align: middle;
        margin-right: 5px;
      }
    }
  }

</style>
